<script setup lang="ts">

import MenuAside from "./components/BaseFrame/MenuAside.vue";
import HeadAside from "./components/BaseFrame/HeadAside.vue";
import { ref, watch } from "vue";
import { useRouter } from 'vue-router'
const router = useRouter()
const flag = ref(true)
watch(() =>
  router.currentRoute.value.path,
  (toPath) => {
    //要执行的方法
    flag.value = toPath === '/' || toPath === '/about'
  }, { immediate: true, deep: true })

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="auto" id="aside">
        <menu-aside></menu-aside>
      </el-aside>
      <el-container>
        <el-header style="line-height: 60px;">
          <head-aside></head-aside>
        </el-header>
        <el-scrollbar v-if="flag">
          <el-main>
            <router-view v-slot="{ Component }">
              <transition>
                <keep-alive>
                  <component :is="Component" :key="$route.path"/>
                </keep-alive>
              </transition>
            </router-view>
          </el-main>
        </el-scrollbar>
        <el-main v-else>
          <router-view v-slot="{ Component }">
              <transition>
                <keep-alive>
                  <component :is="Component" :key="$route.path" />
                </keep-alive>
              </transition>
            </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<style scoped>
.common-layout {
  position: absolute;
  width: 100%;
  height: 100%;
}

.el-container {
  height: 100%;
}

#aside {
  overflow: hidden;
}

#aside::-webkit-scrollbar {
  display: none;
}

.el-main {
  padding: 10px;
  background-color: var(--el-bg-color-page);
}
</style>
